<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar top="20em" :viewerSource="viewerSource" />
    <div class="tool-box-top-left">
      <div class="select-box-wrapper">
        <select-box-v2 :options="typeOptions" v-model:value="drawingMode" style="margin-right: 10px;" />
        <a-radio-group v-model:value="drawingMode" size="small" button-style="solid">
          <a-radio-button v-for="(e,i) in typeOptions" :key="e.key" :value="e.key" style="min-width: 5em;text-align: center;">{{e.text}}</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, reactive, watch, toRaw } from 'vue';
import { SelectBoxV2, SliderBar } from '@components/widgets';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import { G3V } from '@g3x';
import { viewerMixin } from '@mixins';
// import merge from '@g3x/utils/merge';
import Drawing from './drawing';

export default defineComponent({
  name: 'drawing', //
  mixins: [viewerMixin],
  components: { SelectBoxV2, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    return {
      drawing: null,
      typeOptions: [
        {
          text: '线',
          key: 'line'
        },
        {
          text: '多边形',
          key: 'polygon'
        },
        {
          text: '圆',
          key: 'circle'
        },
        {
          text: '矩形',
          key: 'rectangle'
        }
      ]
    };
  },
  data() {
    return {
      drawingMode: 'line'
    };
  },
  computed: {},
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      // const g3vOptions = merge($g3vOptions, true);
      return original;
    },
    onViewerInited() {
      const vm = this;
      const { viewer } = vm;
      const scene = viewer.scene;

      var tileset = new Cesium.Cesium3DTileset({
        url: '//zzgis.com/cdn/3d/3dtiles/40866/tileset.json'
      });

      tileset.readyPromise
        .then(function(tileset) {
          scene.primitives.add(tileset);
          viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(3.65, -0.85, tileset.boundingSphere.radius * 0.65));
          // viewer.trackedEntity = tileset;
        })
        .otherwise(function(error) {
          console.error(error);
        });
      console.log('drawing onViewerInited');
    },
    initEffects() {
      const vm = this;
      const { viewer, drawingMode } = vm;
      const {scene,canvas} = viewer;

      // scene.globe.depthTestAgainstTerrain = true;

      vm.drawing = new Drawing(viewer)
      vm.drawing.drawingMode = vm.drawingMode;

      watch(()=>vm.drawingMode,(drawingMode)=>{
        vm.drawing.drawingMode = drawingMode;
      })
    }
  }
});
</script>

<style lang="less">
.cesium-viewer-wapper {
  .tool-box-top-left {
    min-width: 15em;
  }
}
</style>
